<template>

<div id="logincontent" v-loading="pageLoading">
  <div class="row justify-content-md-center">
    <div class="col col-2"  style="margin-top:39px;">
      <router-link to="/home" class="logo">
        <img src="./../../images/logo1.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 70px;margin-left: 15px;">
        <img src="./../../images/logo2.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 70px;">
      </router-link>
    </div>
  </div>
  <section class="user">
    <div class="user_options-container">
      <div class="user_options-text">
        <div class="user_options-unregistered">
          <h2 class="user_unregistered-title">Don't have an account?</h2>
          <p class="user_unregistered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
          <button class="user_unregistered-signup" id="signup-button">Sign up</button>
        </div>

        <div class="user_options-registered">
          <h2 class="user_registered-title">Have an account?</h2>
          <p class="user_registered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
          <button class="user_registered-login" id="login-button">Login</button>
        </div>
      </div>

      <div class="user_options-forms" id="user_options-forms">
        <div class="user_forms-login">
          <h2 class="forms_title">Login</h2>
          <el-form class="forms_form"  id="f2" ref="loginForm" :model="loginData" :rules="loginRules">
            <fieldset class="forms_fieldset">
              <div class="forms_field">
                <el-form-item prop="email">
                  <input name="email" type="text" placeholder="Email Address" class="forms_field-input" id="username" required autofocus v-model="loginData.email"/>
                </el-form-item>
              </div>
              <div class="forms_field">
                <el-form-item prop="password">
                  <input name="password" type="password" placeholder="Password" class="forms_field-input"  id="password" required v-model="loginData.password"/>
                </el-form-item>
              </div>
            </fieldset>
            <div class="forms_buttons">
              <!-- <button type="button" class="forms_buttons-forgot">Forgot password?</button> -->
              <input type="button" value="Log In" class="forms_buttons-action" v-on:click="login" />
              <el-button type="info" @click="findPass">Forget the password?</el-button>
              <!-- <input type="button" value="Forget the password?" class="forms_buttons-action" style="background-color:#909399;font-size:16px;color:#fff" v-on:click="findPass" /> -->
            </div>
          </el-form>
        </div>
        <div class="user_forms-signup">
          <h2 class="forms_title">Sign Up</h2>
          <el-form class="forms_form" id="f1" :model="signupData" :rules="signupRules" ref="registForm">
            <fieldset class="forms_fieldset">
              <div class="forms_field">
                <el-form-item prop="email">
                  <input placeholder="Email" v-model="signupData.email" class="forms_field-input"  required  id="email" name="email" type="email"/>
                </el-form-item>
              </div>
              <div class="forms_field">
                <el-form-item prop="password">
                  <input name="password" id="newpassword" pattern="^[a-zA-Z0-9]{6,12}$"  v-model="signupData.password" type="password" placeholder="Password" class="forms_field-input" required />
                </el-form-item>
              </div>
              <div class="forms_field">
                <el-form-item prop="cfpassword">
                  <input  name="ispassword" type="password" placeholder="Password" class="forms_field-input" v-model="signupData.cfpassword" id="ispassword" required />
                </el-form-item>
              </div>
            </fieldset>
            <div class="forms_buttons" style="margin-top:5px">
              <input type="button" value="Sign up" class="forms_buttons-action" v-on:click="signUp">
            </div>
          </el-form>
        </div>
      </div>
      <el-dialog title="找回密码" :visible.sync="passDialog" width="30%" v-loading="passLoading">
        <el-form :model="formData" :rules="passRule" ref="passForm">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="passDialog = false">取消</el-button>
          <el-button  type="success" @click.prevent="handleChange">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </section>
</div>
</template>

<script>
import { register, sendEmailOfPassword } from '@/api/user'
// import axios from 'axios'
export default {
  name: 'Login',
  methods: {
    // email: 896871239@qq.com
    // password: 123456
    login () {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.pageLoading = true
          this.$store.dispatch('Login', this.loginData).then(res => {
            console.log(res)
            const data = res.data
            console.log(data.data)
            if (data.code === 0) {
              this.$message.success('登陆成功')
              this.$router.push({path: '/home'})
              this.pageLoading = false
            } else {
              this.$message.error(data.msg)
              this.pageLoading = false
            }
            this.pageLoading = false
          }).catch(err => {
            this.pageLoading = false
            console.log(err)
            console.log(err.response)
          }).finally(() => { this.pageLoading = false })
          this.pageLoading = false
        } else {
          return false
        }
      })
    },
    signUp () {
      this.$refs['registForm'].validate(valid => {
        if (valid) {
          this.pageLoading = true
          register(this.signupData).then(res => {
            console.log(res)
            const data = res.data
            if (res.data.code === 0) {
              this.$message.success('注册成功')
              this.pageLoading = false
              // this.$router.push({path: '/home'})
            } else {
              this.$message.error(data.msg)
              this.pageLoading = false
            }
            this.pageLoading = false
          }).catch(err => {
            this.pageLoading = false
            console.log(err)
          }).finally(() => { this.pageLoading = false })
        } else {
          return false
        }
      })
    },
    findPass () {
      this.passDialog = true
    },
    handleChange () {
      this.$refs['passForm'].validate(valid => {
        if (valid) {
          this.passLoading = true
          sendEmailOfPassword({
            email: this.formData.email
          }).then(res => {
            console.log(res)
            if (res.data.code === 0) {
              this.$message.success('邮件发送成功')
              this.passLoading = false
            } else {
              this.$message.error(res.data.msg)
              this.passLoading = false
            }
          }).catch(() => {
            this.passLoading = false
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
  },
  data () {
    return {
      passLoading: false,
      pageLoading: false,
      passDialog: false,
      formData: {
        email: ''
      },
      loginData: {
        email: '896871239@qq.com',
        password: '123456'
      },
      signupData: {
        email: '',
        password: '',
        cfpassword: ''
      },
      loginRules: {
        email: [{required: true, message: '该项不能为空', trigger: 'blur'}],
        password: [{required: true, message: '该项不能为空', trigger: 'blur'}]
      },
      signupRules: {
        email: [{required: true, message: '该项不能为空', trigger: 'blur'}],
        password: [{required: true, message: '该项不能为空', trigger: 'blur'}],
        cfpassword: [{required: true, message: '该项不能为空', trigger: 'blur'}]
      },
      passRule: {
        email: [{required: true, message: '该项不能为空', trigger: 'blur'}]
      }
    }
  },
  mounted: function () {
    this.loginData = this.$route.params
    const signupButton = document.getElementById('signup-button')
    const loginButton = document.getElementById('login-button')
    const userForms = document.getElementById('user_options-forms')

    signupButton.addEventListener('click', () => {
      userForms.classList.remove('bounceRight')
      userForms.classList.add('bounceLeft')
    }, false)

    loginButton.addEventListener('click', () => {
      userForms.classList.remove('bounceLeft')
      userForms.classList.add('bounceRight')
    }, false)
  }
}
</script>

<style lang="sass" scoped>
/**
 * General variables
 */
$bdrds: 3px

$white: #fff
$black: #000
$gray: #ccc
$salmon: #e8716d
$smoky-black: rgba(#222222, .85)

$ff: 'Montserrat', sans-serif
$ff-body: 12px
$ff-light: 300
$ff-regular: 400
$ff-medium: 500

/**
 * General configs
 */
*
  box-sizing: border-box

body
  font-family: $ff
  font-size: $ff-body
  line-height: 1em

button
//   background-color: transparent
//   padding: 0
//   border: 0
  outline: 0
  cursor: pointer

input
  background-color: transparent
  padding: 0
  border: 0
  outline: 0

  &[type="submit"]
    cursor: pointer

  &::placeholder
    font-size: .85rem
    font-family: $ff
    font-weight: $ff-light
    letter-spacing: .1rem
    color: $gray

/**
 * Bounce to the left side
 */
@keyframes bounceLeft
  0%
      transform: translate3d(100%, -50%, 0)

  50%
      transform: translate3d(-30px, -50%, 0)

  100%
      transform: translate3d(0, -50%, 0)

/**
 * Bounce to the left side
 */
@keyframes bounceRight
  0%
    transform: translate3d(0, -50%, 0)

  50%
    transform: translate3d(calc(100% + 30px), -50%, 0)

  100%
    transform: translate3d(100%, -50%, 0)

/**
 * Show Sign Up form
 */
@keyframes showSignUp
  100%
    opacity: 1
    visibility: visible
    transform: translate3d(0, 0, 0)

/**
 * Page background
 */
.user
  display: flex
  justify-content: center
  align-items: center

  width: 100%
  height: 100vh
  background: url('https://goo.gl/YRxqs1') no-repeat center
  background-size: cover

  &_options-container
    position: relative
    width: 80%

  &_options-text
    display: flex
    justify-content: space-between
    width: 100%
    background-color: $smoky-black
    border-radius: $bdrds

/**
 * Registered and Unregistered user box and text
 */
.user_options-registered,
.user_options-unregistered
  width: 50%
  padding: 75px 45px

  color: $white
  font-weight: $ff-light

.user_registered-title,
.user_unregistered-title
  margin-bottom: 15px
  font-size: 1.66rem
  line-height: 1em

.user_unregistered-text,
.user_registered-text
  font-size: .83rem
  line-height: 1.4em

.user_registered-login,
.user_unregistered-signup
  margin-top: 30px
  border: 1px solid $gray
  border-radius: $bdrds
  padding: 10px 30px

  color: $white
  text-transform: uppercase
  line-height: 1em
  letter-spacing: .2rem

  transition: background-color .2s ease-in-out, color .2s ease-in-out

  &:hover
    color: $smoky-black
    background-color: $gray

/**
 * Login and signup forms
 */
.user_options-forms
  position: absolute
  top: 50%
  left: 30px

  width: calc(50% - 30px)
  min-height: 420px
  background-color: $white
  border-radius: $bdrds
  box-shadow: 2px 0 15px rgba($black, .25)
  overflow: hidden

  transform: translate3d(100%, -50%, 0)
  transition: transform .4s ease-in-out

  .user_forms-login
    transition: opacity .4s ease-in-out, visibility .4s ease-in-out

  .forms
    &_title
      margin-bottom: 45px

      font-size: 1.5rem
      font-weight: $ff-medium
      line-height: 1em
      text-transform: uppercase
      color: $salmon
      letter-spacing: .1rem

    &_field
      &:not(:last-of-type)
        margin-bottom: 20px

    &_field-input
      width: 100%
      border-bottom: 1px solid $gray
      padding: 6px 20px 6px 0

      font-family: $ff
      font-size: 1rem
      font-weight: $ff-light
      color: darken($gray, 30%)
      letter-spacing: .1rem

      transition: border-color .2s ease-in-out

      &:focus
        border-color: darken($gray, 30%)

    &_buttons
      display: flex
      justify-content: space-between
      align-items: center

      margin-top: 35px

      &-forgot
        font-family: $ff
        letter-spacing: .1rem
        color: $gray
        text-decoration: underline

        transition: color .2s ease-in-out

        &:hover
          color: darken($gray, 10%)

      &-action
        background-color: $salmon
        border-radius: $bdrds
        padding: 10px 35px

        font-size: 1rem
        font-family: $ff
        font-weight: $ff-light
        color: $white
        text-transform: uppercase
        letter-spacing: .1rem

        transition: background-color .2s ease-in-out

        &:hover
          background-color: darken($salmon, 10%)

  .user_forms-signup,
  .user_forms-login
    position: absolute
    top: 70px
    left: 40px

    width: calc(100% - 80px)

    opacity: 0
    visibility: hidden
    transition: opacity .4s ease-in-out, visibility .4s ease-in-out, transform .5s ease-in-out

  .user_forms-signup
    transform: translate3d(120px, 0, 0)

    .forms_buttons
      justify-content: flex-end

  .user_forms-login
    transform: translate3d(0, 0, 0)
    opacity: 1
    visibility: visible

/**
 * Triggers
 */
.user_options-forms
  &.bounceLeft
    animation: bounceLeft 1s forwards

    .user_forms-signup
      animation: showSignUp 1s forwards

    .user_forms-login
      opacity: 0
      visibility: hidden
      transform: translate3d(-120px, 0, 0)

  &.bounceRight
    animation: bounceRight 1s forwards

/**
 * Responsive 990px
 */
@media screen and (max-width: 990px)
  .user_options-forms
    min-height: 350px

    .forms_buttons
      flex-direction: column

    .user_forms-login
      .forms_buttons-action
        margin-top: 10px

    .user_forms-signup,
    .user_forms-login
      top: 40px

  .user_options-registered,
  .user_options-unregistered
    padding: 50px 45px

.logo
  background-color: white
  display: flex

</style>
